<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-23 14:20:58
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-29 18:24:00
 * @FilePath: \shangyitong\src\components\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="login_container">
		<!-- title 对话框的标题   v-model 绑定的值 控制对话框的显示和隐藏 -->
		<el-dialog
			title="用户登录"
			v-model="userStore.visible"
			width="800"
			:close-on-click-modal="false"
			@close="closeDialog"
		>
			<!-- 对话框身体结构 -->
			<el-row>
				<el-col :span="12">
					<div class="login">
						<div v-show="scene == 0">
							<el-form
								ref="formRef"
								:rules="rules"
								:model="usePhone"
							>
								<el-form-item prop="phone">
									<el-input
										:prefix-icon="UserFilled"
										v-model="usePhone.phone"
										placeholder="请输入手机号码"
										clearable
										:suffix-icon="
											isPhone ? CircleCheck : ''
										"
									></el-input>
								</el-form-item>
								<el-form-item prop="code">
									<el-input
										:prefix-icon="Lock"
										v-model="usePhone.code"
										placeholder="请输入验证码"
										clearable
										:suffix-icon="
											usePhone.code ? CircleCheck : ''
										"
									></el-input>
								</el-form-item>
								<el-form-item>
									<el-button
										size="small"
										:disabled="!isPhone || flag"
										type="default"
										@click="getUserCode"
									>
										<Countdown
											v-if="flag"
											:flag="flag"
											@getFlag="getFlag"
										/>
										<span v-else>获取验证码</span>
									</el-button>
								</el-form-item>
							</el-form>
							<div class="bottom">
								<el-button
									style="width: 90%"
									size="default"
									type="primary"
									:disabled="
										!isPhone || usePhone.code.length < 6
									"
									@click="login"
									>用户登录</el-button
								>
								<div class="icon" @click="changeScene">
									<p>微信扫码登录</p>
									<svg
										t="1750663841435"
										class="icon"
										viewBox="0 0 1024 1024"
										version="1.1"
										xmlns="http://www.w3.org/2000/svg"
										p-id="5146"
										width="32"
										height="32"
									>
										<path
											d="M595.77552 510.579651c-14.478759 0-29.04143 14.562671-29.04143 29.016871 0 14.6957 14.560624 29.068036 29.04143 29.068036 21.951965 0 36.3243-14.372336 36.3243-29.068036C632.09982 525.143345 617.727485 510.579651 595.77552 510.579651z"
											fill="#0DD116"
											p-id="5147"
										></path>
										<path
											d="M755.467569 510.579651c-14.369266 0-28.851095 14.562671-28.851095 29.016871 0 14.6957 14.481829 29.068036 28.851095 29.068036 21.76163 0 36.322254-14.372336 36.322254-29.068036C791.789823 525.143345 777.229199 510.579651 755.467569 510.579651z"
											fill="#0DD116"
											p-id="5148"
										></path>
										<path
											d="M298.153052 300.001655c-21.734 0-43.714617 14.344706-43.714617 36.214806 0 21.762653 21.980617 36.322254 43.714617 36.322254 21.760606 0 36.213783-14.559601 36.213783-36.322254C334.366835 314.346361 319.912635 300.001655 298.153052 300.001655z"
											fill="#0DD116"
											p-id="5149"
										></path>
										<path
											d="M501.367337 372.539738c21.844517 0 36.325323-14.560624 36.325323-36.322254 0-21.8701-14.480806-36.213783-36.325323-36.213783-21.760606 0-43.630706 14.343683-43.630706 36.213783C457.736631 357.979114 479.606731 372.539738 501.367337 372.539738z"
											fill="#0DD116"
											p-id="5150"
										></path>
										<path
											d="M512.330016 1.7519c-280.878109 0-508.827751 227.839125-508.827751 508.827751 0 280.987602 227.949642 508.827751 508.827751 508.827751 280.908808 0 508.74691-227.840148 508.74691-508.827751C1021.076926 229.591025 793.237801 1.7519 512.330016 1.7519zM392.479371 670.464081c-36.241412 0-65.36573-7.392364-101.69003-14.560624l-101.498672 50.91153 29.015847-87.372953C145.658939 568.666604 102.13568 503.164774 102.13568 423.454338c0-138.149407 130.73146-246.928902 290.342668-246.928902 142.730749 0 267.790022 86.880743 292.931632 203.870224-9.217942-1.037632-18.543332-1.691525-27.948539-1.691525-137.932466 0-246.819408 102.916974-246.819408 229.77829 0 21.078061 3.27151 41.421388 8.943696 60.8376C410.61338 670.028153 401.586796 670.464081 392.479371 670.464081zM820.726875 772.153088l21.869077 72.591295-79.627549-43.630706c-29.0445 7.2798-58.221006 14.560624-87.12736 14.560624-138.148383 0-246.927879-94.40716-246.927879-210.683397 0-116.089995 108.779496-210.689536 246.927879-210.689536 130.405025 0 246.600421 94.598518 246.600421 210.689536C922.441465 670.464081 879.028723 728.4661 820.726875 772.153088z"
											fill="#0DD116"
											p-id="5151"
										></path>
									</svg>
								</div>
							</div>
						</div>
						<div class="weiChat" v-show="scene == 1">
							<!-- 在这个容器中显示微信扫码登录的二维码页面 -->
							<div id="login_container"></div>
							<div class="phoneIcon" @click="handler">
								<p>手机短信验证码登录</p>
								<svg
									t="1750761950138"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="2505"
									width="32"
									height="32"
								>
									<path
										d="M726.5781 947.106726 307.312154 947.106726c-30.607088 0-55.510268-25.003464-55.510268-55.736419l0-758.740614c0-30.732955 24.90318-55.736419 55.510268-55.736419l419.265946 0c30.607088 0 55.510268 25.003464 55.510268 55.736419l0 758.740614C782.088368 922.103262 757.185188 947.106726 726.5781 947.106726zM307.312154 104.087637c-15.615653 0-28.315906 12.806677-28.315906 28.542056l0 758.740614c0 15.735379 12.701277 28.542056 28.315906 28.542056l419.265946 0c15.615653 0 28.315906-12.806677 28.315906-28.542056l0-758.740614c0-15.735379-12.701277-28.542056-28.315906-28.542056L307.312154 104.087637z"
										fill="#14AEED"
										p-id="2506"
									></path>
									<path
										d="M432.379615 162.313759l162.705686 0 0 27.629267-162.705686 0 0-27.629267Z"
										fill="#14AEED"
										p-id="2507"
									></path>
									<path
										d="M519.15905 885.919155c-26.238594 0-47.589878-21.351284-47.589878-47.589878 0-26.238594 21.351284-47.589878 47.589878-47.589878 26.238594 0 47.589878 21.351284 47.589878 47.589878C566.748928 864.567871 545.396621 885.919155 519.15905 885.919155zM519.15905 804.337091c-18.742876 0-33.993209 15.250332-33.993209 33.993209 0 18.742876 15.250332 33.993209 33.993209 33.993209 18.742876 0 33.993209-15.250332 33.993209-33.993209C553.151235 819.587424 537.900903 804.337091 519.15905 804.337091z"
										fill="#14AEED"
										p-id="2508"
									></path>
									<path
										d="M242.044662 257.481236l27.629267 0 0 54.235229-27.629267 0 0-54.235229Z"
										fill="#14AEED"
										p-id="2509"
									></path>
									<path
										d="M242.044662 325.019445l27.629267 0 0 55.258535-27.629267 0 0-55.258535Z"
										fill="#14AEED"
										p-id="2510"
									></path>
								</svg>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="rightContainer">
						<div class="top">
							<div class="item">
								<img
									src="@/assets/images/code_login_wechat.png"
									alt=""
								/>
								<svg
									t="1750663841435"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="5146"
									width="16"
									height="16"
								>
									<path
										d="M595.77552 510.579651c-14.478759 0-29.04143 14.562671-29.04143 29.016871 0 14.6957 14.560624 29.068036 29.04143 29.068036 21.951965 0 36.3243-14.372336 36.3243-29.068036C632.09982 525.143345 617.727485 510.579651 595.77552 510.579651z"
										fill="#515151"
										p-id="5147"
									></path>
									<path
										d="M755.467569 510.579651c-14.369266 0-28.851095 14.562671-28.851095 29.016871 0 14.6957 14.481829 29.068036 28.851095 29.068036 21.76163 0 36.322254-14.372336 36.322254-29.068036C791.789823 525.143345 777.229199 510.579651 755.467569 510.579651z"
										fill="#515151"
										p-id="5148"
									></path>
									<path
										d="M298.153052 300.001655c-21.734 0-43.714617 14.344706-43.714617 36.214806 0 21.762653 21.980617 36.322254 43.714617 36.322254 21.760606 0 36.213783-14.559601 36.213783-36.322254C334.366835 314.346361 319.912635 300.001655 298.153052 300.001655z"
										fill="#515151"
										p-id="5149"
									></path>
									<path
										d="M501.367337 372.539738c21.844517 0 36.325323-14.560624 36.325323-36.322254 0-21.8701-14.480806-36.213783-36.325323-36.213783-21.760606 0-43.630706 14.343683-43.630706 36.213783C457.736631 357.979114 479.606731 372.539738 501.367337 372.539738z"
										fill="#515151"
										p-id="5150"
									></path>
									<path
										d="M512.330016 1.7519c-280.878109 0-508.827751 227.839125-508.827751 508.827751 0 280.987602 227.949642 508.827751 508.827751 508.827751 280.908808 0 508.74691-227.840148 508.74691-508.827751C1021.076926 229.591025 793.237801 1.7519 512.330016 1.7519zM392.479371 670.464081c-36.241412 0-65.36573-7.392364-101.69003-14.560624l-101.498672 50.91153 29.015847-87.372953C145.658939 568.666604 102.13568 503.164774 102.13568 423.454338c0-138.149407 130.73146-246.928902 290.342668-246.928902 142.730749 0 267.790022 86.880743 292.931632 203.870224-9.217942-1.037632-18.543332-1.691525-27.948539-1.691525-137.932466 0-246.819408 102.916974-246.819408 229.77829 0 21.078061 3.27151 41.421388 8.943696 60.8376C410.61338 670.028153 401.586796 670.464081 392.479371 670.464081zM820.726875 772.153088l21.869077 72.591295-79.627549-43.630706c-29.0445 7.2798-58.221006 14.560624-87.12736 14.560624-138.148383 0-246.927879-94.40716-246.927879-210.683397 0-116.089995 108.779496-210.689536 246.927879-210.689536 130.405025 0 246.600421 94.598518 246.600421 210.689536C922.441465 670.464081 879.028723 728.4661 820.726875 772.153088z"
										fill="#515151"
										p-id="5151"
									></path>
								</svg>
								<p>微信扫一扫关注</p>
								<p>"快速预约挂号"</p>
							</div>
							<div class="item">
								<img
									src="@/assets/images/code_login_wechat.png"
									alt=""
								/>
								<svg
									t="1750664662255"
									class="icon"
									viewBox="0 0 1024 1024"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									p-id="5591"
									width="32"
									height="32"
								>
									<path
										d="M478.589065 294.377425h252.839506v397.319224h-361.199294z"
										fill="#C0EAFF"
										p-id="5592"
									></path>
									<path
										d="M695.308642 843.400353h-75.851852c-10.835979 0-18.059965-7.223986-18.059965-18.059965s7.223986-18.059965 18.059965-18.059965h75.851852c7.223986 0 12.641975-5.417989 12.641975-12.641975V222.137566c0-7.223986-5.417989-12.641975-12.641975-12.641975H323.273369c-7.223986 0-12.641975 5.417989-12.641976 12.641975V794.638448c0 7.223986 5.417989 12.641975 12.641976 12.641975h229.361552c10.835979 0 18.059965 7.223986 18.059964 18.059965s-7.223986 18.059965-18.059964 18.059965H323.273369c-27.089947 0-48.761905-21.671958-48.761905-48.761905V222.137566c0-27.089947 21.671958-48.761905 48.761905-48.761905h370.229277c27.089947 0 48.761905 21.671958 48.761904 48.761905V794.638448c0 27.089947-21.671958 48.761905-46.955908 48.761905z"
										fill="#1F87DD"
										p-id="5593"
									></path>
									<path
										d="M724.204586 316.049383H294.377425c-10.835979 0-18.059965-7.223986-18.059965-18.059965s7.223986-18.059965 18.059965-18.059965h429.827161c10.835979 0 18.059965 7.223986 18.059964 18.059965s-9.029982 18.059965-18.059964 18.059965zM715.174603 707.950617H294.377425c-10.835979 0-18.059965-7.223986-18.059965-18.059964s7.223986-18.059965 18.059965-18.059965h420.797178c10.835979 0 18.059965 7.223986 18.059965 18.059965s-9.029982 18.059965-18.059965 18.059964z"
										fill="#1F87DD"
										p-id="5594"
									></path>
									<path
										d="M547.216931 263.675485H469.559083c-10.835979 0-18.059965-7.223986-18.059965-18.059965s7.223986-18.059965 18.059965-18.059964h77.657848c10.835979 0 18.059965 7.223986 18.059965 18.059964s-7.223986 18.059965-18.059965 18.059965z"
										fill="#1F87DD"
										p-id="5595"
									></path>
								</svg>
								<p>扫一扫下载</p>
								<p>"预约挂号APP"</p>
							</div>
						</div>
						<p class="tip">尚医通官方指定平台</p>
						<p class="tip">快速挂号 安全放行</p>
					</div>
				</el-col>
			</el-row>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="userStore.visible = false" :plain="true"
						>关闭</el-button
					>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { reqWxLogin } from '@/api/user/index'
import { UserFilled, Lock, CircleCheck } from '@element-plus/icons-vue'
import { ref, computed, watch } from 'vue'
import { useRoute,useRouter } from 'vue-router'
import Countdown from '../countdown/index.vue'
//获取user仓库的数据(visible) 可以控制logind对话框的显示和隐藏
import useUserStore from '@/store/modules/user'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import type { WXLoginResponseData } from '@/api/user/type'
let $router = useRouter()
let $route = useRoute()
let userStore = useUserStore()
//手机用户手机号码和验证码
let usePhone = ref({
	phone: '', //手机号码
	code: '', //验证码
})
//定义响应式数据控制倒计时组件显示和隐藏
let flag = ref<boolean>(false) //flag为真开始倒计时,为假并非倒计时
//计算收集的表单元素手机号码是否符合正则表达式
let isPhone = computed(() => {
	//手机号码正则表达式
	const reg =
		/^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/
	//返回布尔值:真代表手机号码、假代表的即为不是手机号码
	return reg.test(usePhone.value.phone)
})
// 场景切换  0 手机号码登录 1 微信扫一扫登录
let scene = ref<number>(0)
//自定义表单验证规则
//@ts-ignore
const validatePhone = (rule: any, value: any, callback: any) => {
	//手机号码正则表达式
	const reg =
		/^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/
	if (reg.test(value)) {
		callback()
	} else {
		callback(new Error('请输入正确格式的手机号码'))
	}
}
//@ts-ignore
const validateCode = (rule: any, value: any, callback: any) => {
	const reg = /^\d{6}$/
	if (reg.test(value)) {
		if (value === userStore.smsCode) {
			callback()
		} else {
			callback(new Error('输入的验证码不正确'))
		}
	} else {
		callback(new Error('请输入正确的验证码格式'))
	}
}
//定义表单实例对象
let formRef = ref<FormInstance>()
//定义规则
const rules = <FormRules>{
	//手机号码
	phone: [{ validator: validatePhone, trigger: 'blur', required: true }],
	//验证码
	code: [{ validator: validateCode, trigger: 'blur', required: true }],
}
//获取手机验证码的事件回调
const getUserCode = async () => {
	// //解决Element按钮禁用状态时还能点击的问题
	// if(!isPhone||flag.value) return
	//开始显示倒计时组件
	flag.value = true
	try {
		//获取验证码成功
		await userStore.getUerCode(usePhone.value.phone)
		usePhone.value.code = userStore.smsCode
	} catch (error) {
		//获取验证码失败
		ElMessage({
			type: 'error',
			message: (error as Error).message,
		})
	}
}
//计数器子组件自定义事件
//当倒计时为0的时候马,通知父组件倒计时组件隐藏
const getFlag = (value: boolean) => {
	flag.value = value
}
//用户登录事件回调
const login = async () => {
	//表单检验的两项都符合条件
	await formRef.value?.validate()
	try {
		//调用仓库中用户登录的方法
		await userStore.userLogin(usePhone.value)
		//关闭对话框
		userStore.visible = false
        //获取url的query参数
        let redirect_URL = $route.query.redirect as string
        //跳转到曾经想登录先访问的那个页面
        if(redirect_URL){
            $router.push(redirect_URL)
        }else{
            $router.push({path:'/home'})
        }
	} catch (error) {
		ElMessage({
			type: 'error',
			message: (error as Error).message,
		})
	}
}

//点击微信扫码登录||微信小图标 切换为微信扫码登录
const changeScene = async () => {
	scene.value = 1
	//发请求获取微信扫码二维码需要的参数
	//还需要携带一个参数:告诉学校服务器用户授权成功后成定向项目的某一个页面
	let redirect_URL = encodeURIComponent(window.location.origin + '/wxlogin')
	let result: WXLoginResponseData = await reqWxLogin(redirect_URL)
	// console.log(result, result)
	if (result.code == 200) {
		// appid: "wx4e4e441b26a2e3cf"
		// redirectUri: "http%3A%2F%2Fforum.atguigu.cn%2Fapi%2FweixinPc%2Fcallback"
		// scope: "snsapi_login"
		// state: "syt-http://localhost:5173/wxlogin"
		//@ts-ignore
		//生成微信扫码登录的二维码页面
		new WxLogin({
			self_redirect: true, //true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri
			id: 'login_container', //显示二维码的容器id
			appid: result.data.appid, //应用的唯一标识
			scope: 'snsapi_login', //当前微信扫码登陆页面已经获得授权
			redirect_uri: result.data.redirectUri, //填写授权回调域路径,就是用户授权成功后微信服务器向公司后台推送code地址
			state: result.data.state, //state就是学校服务器重定向的地址携带用户信息
			style: 'black', //二维码外观是黑色还是白色
			href: '',
			onReady: function (isReady: any) {
				console.log(isReady)
			},
		})
	}
}
//点击手机验证码登录事件回调
const handler = () => {
	//返回手机号码和验证码登录场景
	scene.value = 0
}
//关闭对话框事件(清除上一次表单信息,错误的表单验证信息)
const closeDialog = () => {
	//关闭对话框
	userStore.visible = false
	//清空上一次表单信息
	Object.assign(usePhone.value, {
		phone: '',
		code: '',
	})
	formRef.value?.clearValidate('phone')
	formRef.value?.clearValidate('code')
}
//监听场景的数值
watch(
	() => scene.value,
	(newValue: number) => {
        console.log("监听场景的数值",newValue)
		if (newValue == 1) {
			userStore.queryState()
		}
	}
)
</script>
<script lang="ts">
export default {
	name: 'Login',
}
</script>
<style lang="scss" scoped>
.login_container {
	:deep(.el-dialog__body) {
		border-top: 1px solid #7f7f7f;
		border-bottom: 1px solid #7f7f7f;
	}
	.login {
		margin: 20px;
		border: 1px solid #7f7f7f;
		padding: 20px;
		border-radius: 2%;
		.bottom {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 12px;
			p {
				margin: 10px 0;
			}
			i {
				font-size: 30px;
			}
			.icon {
				text-align: center;
				cursor: pointer;
			}
		}
		.weiChat {
			.phoneIcon {
				display: flex;
				flex-direction: column;
				align-items: center;
				p {
					margin: 5px 0;
				}
			}
		}
	}
	.rightContainer {
		margin: 20px;
		.top {
			display: flex;
			justify-content: space-between;
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				img {
					width: 130px;
					height: 130px;
				}
				p {
					margin: 5px 0;
				}
			}
		}
		.tip {
			text-align: center;
			margin: 20px 0;
			font-size: 20px;
			font-weight: 900;
			font-style: italic;
		}
	}
}
</style>
